<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定窗口</title>
		<script src="../../jquery/jquery-1.12.4.js"></script>
		<script>
			$(function(){
      			$("*").css({"margin":"0","padding":"0"})
				
				$("#wrap").css({"width":"100%","height":"80px",
					"background":"#eee",
					"border":"1px solid #eee",
					"position":"sticky",			
					"top":"50px"})
					
				$("from").css({"width":"500px","height":"40px","margin":"0 auto","margin-top":"20px"})
				
				$("#text").css({"width":"396px","height":"36px","display":"block","float":"left"})
				
				$("#sub").css({"width":"100px","height":"40px","display":"block","float":"left",
				"background":"#3385FF","border":"1px solid #3385FF","color":"white","cursor":"pointer"})
				
			    $(".box").css({"width":"100%","height":"250px","line-height":"250px","margin":"0 auto",
			    "color":"white","font-size":"100px","text-align":"center"})
				
				$("#a1").css("background","#009966");
				$("#a2").css("background","#3385FF");
				$("#a3").css("background","red");
				$("#a4").css("background","#ADFF2F");
				$("#a5").css("background","aquamarine");
				$("#a6").css("background","coral");
				$("#a7").css("background","darkmagenta");
			})		
		</script>
	</head>
	<body>
		<div class="box" id="a1">1</div>
		<div id="wrap">
			<form action="#" method="post">
				<input type="text" id="text" />
				<input type="submit" id="sub" value="搜索" />
			</form>
		</div>
		<div class="box" id="a2">2</div>
		<div class="box" id="a3">3</div>
		<div class="box" id="a4">4</div>
		<div class="box" id="a5">5</div>
		<div class="box" id="a6">6</div>
		<div class="box" id="a7">7</div>
	</body>
</html>
